<template>
  <div class="layout-wrapper layout-witness">
    <div class="layout-header layout-search">
      <el-form :inline="true" :model="searchForm">
        <el-form-item class="rigthText">
          <el-input
            v-model.trim="searchForm.keywords"
            class="ui-w320"
            placeholder="设备名称"
            @keyup.native.enter="getDevice()"
          >
            <el-button
              slot="append"
              type="primary"
              icon="icon-sousuo"
              @click="getDevice()"
            />
          </el-input>
        </el-form-item>
      </el-form>
    </div>
    <div class="layout-body">
      <el-table
        ref="taskTable"
        v-loading="tableLoading"
        :data="tableData"
        height="100%"
        stripe
      >
        <el-table-column
          type="index"
          align="left"
          label="序号"
          width="50"
        >
          <template slot-scope="scope">
            {{ (pageObj.currentPage)*pageObj.pageSize + 1+scope.$index }}
          </template>
        </el-table-column>
        <el-table-column prop="devicename" label="设备名称" min-width="200" />
        <el-table-column prop="devicecode" label="设备编号" min-width="200" />
        <el-table-column prop="devicetype" label="设备类型" min-width="200" />
        <el-table-column
          label="操作"
          align="left"
          header-align="center"
          width="200"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              size="default"
              @click="viewDate(scope.row)"
            >
              查看
            </el-button>
            <el-button
              type="text"
              size="default"
              @click="updateDate(scope.row)"
            >
              取消关联
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="layout-footer">
      <pagination
        v-if="pageObj.total > pageObj.pageSizes[0]"
        :total="pageObj.total"
        :page.sync="pageObj.currentPage"
        :limit.sync="pageObj.pageSize"
        :pageSizes="pageObj.pageSizes"
        @pagination="getDevice()"
      />
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button :loading="btnLoading" type="primary" @click="submitRoom()">确定</el-button>
      <el-button @click="cancel()">取消</el-button>
    </span>
  </div>
</template>
<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
import { devicePage} from "../../../../../../api/weeon/device";
export default {
  // 引入组件
  components: {},
  props: {
    roomid: {
      type: String
    }
  },
  data() {
    // 这里存放数据
    return {
      roomForm: {},
      saveLoading: false,
      tableLoading: false,
      pageLoading: false,
      tableData:[],
      pageObj: {
        total: 0,
        currentPage: 0,
        pageSize: 10,
        pageSizes: [10, 20, 30]
      },
      searchForm: {
        keywords: ""
      },
    };
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getDevice();
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  // 生命周期 - 销毁之前
  beforeDestroy() {},
  // 生命周期 - 销毁完成
  destroyed() {},
  // 如果页面有keep-alive缓存功能，这个函数会触发
  activated() {},
  // 方法集合
  methods: {
    //获取房间信息
    async getDevice(){
      try {
        this.tableLoading = true;
        this.tableData = [];
        let params = {
          roomid: this.roomid,
          keywords: this.searchForm.keywords,
          pageNo: this.pageObj.currentPage,
          pageSize: this.pageObj.pageSize
        };
        const res = await devicePage(params);
        this.tableLoading = false;
        if (res.stat === 1) {
          if (res.data.totalElements === 0 && this.pageObj.currentPage !== 0) {
            this.pageObj.currentPage = 0;
            this.$nextTick(() => {
              this.getDevice();
            });
            return;
          }
          this.tableData = res.data.content;
          this.pageObj.total = res.data.totalElements;
        } else {
          this.$message({
            type: "error",
            message: res.msg || "获取数据失败，请稍后再试",
            single: true
          });
        }
      } catch (error) {
        console.log(error);
        this.tableLoading = false;
      }
    },
    //取消
    cancel() {
      this.$emit("close");
    },
  }
};
</script>
<style lang="scss" scoped>
.witness-result {
  width: 76px;
  height: 20px;
  line-height: 20px;
  background: #fc9306;
  border-radius: 10px;
  color: #fff;
  font-size: 12px;
  text-align: center;
}
.rigthText {
  padding-right: 10px;
  float: right;
  // margin-left: 460px !important;
}
.dialog-footer {
  text-align: right;
}
</style>
